<template>
  <div class="task-home">
    <PanelGroup :statistics="statistics" />
    <el-row :gutter="20" class="mt-20">
      <el-col :sm="15">
        <RecentBill :card-h="equalH+'px'" />
      </el-col>
      <el-col :sm="9">
        <RecentTask :card-h="(equalH - 20) / 2 +'px'" />
        <el-card
          shadow="never"
          class="mt-20"
          :body-style="{padding:'10px'}"
          :style="{height:(equalH - 20) / 2 +'px'}"
        >
          <div slot="header" class="clearfix fs-15">
            <span>任务月度情况</span>
            <el-select
              class="float-r"
              size="mini"
              v-model="dateRange"
              placeholder="请选择"
              style="width:100px"
            >
              <el-option label="前半个月" :value="1"></el-option>
              <el-option label="后半个月" :value="2"></el-option>
            </el-select>
            <DateSelect class="float-r mr-10" @dateChange="dateChange" />
          </div>
          <LineChart :selectedDate="selectedDate" :dateRange="dateRange" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./components/PanelGroup";
import RecentTask from "./components/RecentTask";
import RecentBill from "./components/RecentBill";
import LineChart from "./components/LineChart";
import DateSelect from "@/components/DateSelect";

import { getTaskGeneralStatic } from "api/home";
import { showLoading, hideLoading } from "@/utils/loading";
import dayjs from "dayjs";

export default {
  components: {
    PanelGroup,
    RecentTask,
    RecentBill,
    LineChart,
    DateSelect
  },
  data() {
    return {
      statistics: {},
      equalH: 700,
      selectedDate: {},
      dateRange: 1
    };
  },
  created() {
    this.selectedDate = {
      year: dayjs().year(),
      month: dayjs().month() + 1
    };
    this.loadData();
  },
  methods: {
    loadData() {
      showLoading();
      getTaskGeneralStatic().then(res => {
        hideLoading();
        this.statistics = res.data;
      });
    },
    //获取改变后的年月
    dateChange(obj) {
      this.selectedDate = obj;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "styles/variables.scss";
.mini-w {
  width: 80px;
}
.hd-wrap {
  height: 124px;
  padding: 30px 0;
  margin-bottom: 5px;
  border-radius: 10px;
  .hd-num {
    font-size: 26px;
    font-weight: bold;
    margin-top: 15px;
  }
}
</style>

